import React, { useState, createRef } from 'react'
import '../assest/style/style.css'
import '../assest/style/tailwind.min.css'
import api from '@/api'
import { message } from 'antd'
import { useNavigate } from 'react-router-dom'
import { useAppDispatch, useAppSelector } from '@/store/hooks'
import { setState } from '@/store/modules/user'
export default function () {
    const dispatch = useAppDispatch()
    let [LoginData, setLoginData] = useState({
        uid: '',
        pwd: ''
    })
    let nav = useNavigate()
    //用户名
    let Loginuidvref: any = createRef()
    function userLoginid(e: any) {
        setLoginData({ ...LoginData, uid: e.target.value })

    }
    function uservref() {
        var uPattern = /^[a-zA-Z0-9_-]{3,16}$/;
        const flag: boolean = uPattern.test(LoginData.uid)
        if (!flag) {
            Loginuidvref.current.style.display = "block"
        } else {
            Loginuidvref.current.style.display = "none"
        }
    }
    //密码
    let Loginpwdvref: any = createRef()
    function userLoginpwd(e: any) {
        setLoginData({ ...LoginData, pwd: e.target.value })
    }
    function uservrefpwd() {
        var uPattern = /^[a-zA-Z0-9_-]{3,16}$/;
        const flag: boolean = uPattern.test(LoginData.uid)
        if (!flag) {
            Loginpwdvref.current.style.display = "block"
        } else {
            Loginpwdvref.current.style.display = "none"
        }
    }
    //登录
    async function login() {
        if (LoginData.pwd == '') {
            Loginpwdvref.current.style.display = "block"
        } else {
            Loginpwdvref.current.style.display = "none"
        }
        if (LoginData.uid == '') {
            Loginuidvref.current.style.display = "block"
        } else {
            Loginuidvref.current.style.display = "none"
        }
        if (LoginData.pwd != '' || LoginData.uid != '') {
            const res = await api.user.userLogin(LoginData)
            if (res.data.code == 200) {
                message.success(res.data.message)
                // console.log(res.data);
                localStorage.setItem('id', res.data.id)
                localStorage.setItem('token', res.data.token)
                dispatch(setState(res.data.userIfo.avatar))
                nav('/')
            } else {
                message.error(res.data.message)
            }

        }
    }
    return (
        <div className="relative min-h-screen flex">
            <div
                className="
                flex flex-col
                sm:flex-row
                items-center
                md:items-start
                sm:justify-center
                md:justify-start
                flex-auto
                min-w-0
                bg-white
            "
            >
                <div
                    className="
                    sm:w-1/2
                    xl:w-3/5
                    h-full
                    hidden
                    md:flex
                    flex-auto
                    items-center
                    justify-center
                    p-10
                    overflow-hidden
                    bg-purple-900
                    text-white
                    bg-no-repeat bg-cover
                    relative
                "
                // style="background-image: url(img/img.jpg)"
                >
                    <div
                        className="
                        absolute
                        bg-gradient-to-b
                        from-indigo-600
                        to-blue-500
                        opacity-75
                        inset-0
                        z-0
                    "
                    ></div>
                    <div className="w-full max-w-md z-10">
                        <div className="sm:text-4xl xl:text-5xl font-bold leading-tight mb-6"
                        >欢迎光临</div>
                        <div className="sm:text-sm xl:text-md text-gray-200 font-normal"
                        >欢迎来到好玩俱乐部，在这里和志同道合的朋友一起分享有趣的故事，一起组织有趣的活动...</div>
                    </div>
                    <ul className="circles">
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
                <div
                    className="
                    md:flex md:items-center md:justify-center
                    w-full
                    sm:w-auto
                    md:h-full
                    w-2/5
                    xl:w-2/5
                    p-8
                    md:p-10
                    lg:p-14
                    sm:rounded-lg
                    md:rounded-none
                    bg-white
                "
                >
                    <div className="max-w-md w-full mx-auto space-y-8">
                        <div className="text-center">
                            <h2 className="mt-6 text-3xl font-bold text-gray-900">欢迎回来</h2>
                            <p className="mt-2 text-sm text-gray-500">第三方登录</p>
                        </div>
                        <div className="flex flex-row justify-center items-center space-x-3">
                            <a
                                href="javascript:"
                                className="
                                w-11
                                h-11
                                items-center
                                justify-center
                                inline-flex
                                rounded-2xl
                                font-bold
                                text-lg
                                bg-blue-900
                                hover:shadow-lg
                                cursor-pointer
                                transition
                                ease-in
                                duration-300
                            "
                            ><img
                                    className="w-4 h-4"
                                    src=""
                                /></a>
                            <a
                                href="javascript:"
                                className="
                                w-11
                                h-11
                                items-center
                                justify-center
                                inline-flex
                                rounded-2xl
                                font-bold
                                text-lg text-white
                                bg-blue-400
                                hover:shadow-lg
                                cursor-pointer
                                transition
                                ease-in
                                duration-300
                            "
                            ><img
                                    className="w-4 h-4"
                                    src=""
                                /></a>
                            <a
                                href="javascript:"
                                className="
                                w-11
                                h-11
                                items-center
                                justify-center
                                inline-flex
                                rounded-2xl
                                font-bold
                                text-lg text-white
                                bg-blue-500
                                hover:shadow-lg
                                cursor-pointer
                                transition
                                ease-in
                                duration-300
                            "
                            ><img
                                    src=""
                                    className="w-4 h-4"
                                /></a>
                        </div>
                        <div className="flex items-center justify-center space-x-2">
                            <span className="h-px w-16 bg-gray-200"></span>
                            <span className="text-gray-300 font-normal">使用电子邮箱登录</span>
                            <span className="h-px w-16 bg-gray-200"></span>
                        </div>
                        <form className="mt-8 space-y-6" action="#" method="POST">
                            <input type="hidden" name="remember" value="true" />
                            <div className="relative">
                                <label className="ml-3 text-sm font-bold text-gray-700 tracking-wide"
                                >用户名</label>
                                <input
                                    className="
                                    w-full
                                    text-base
                                    px-4
                                    py-2
                                    border-b border-gray-300
                                    focus:outline-none
                                    rounded-2xl
                                    focus:border-indigo-500
                                "
                                    type=""
                                    placeholder="请输入用户名"
                                    onChange={(e) => { userLoginid(e) }}
                                    onBlur={uservref}
                                />

                            </div>
                            <p ref={Loginuidvref} style={{ color: 'red', display: 'none' }}>长度应在1到3之间</p>
                            <div className="mt-8 content-center">
                                <label className="ml-3 text-sm font-bold text-gray-700 tracking-wide"
                                >密码</label>
                                <input
                                    className="
                                    w-full
                                    content-center
                                    text-base
                                    px-4
                                    py-2
                                    border-b
                                    rounded-2xl
                                    border-gray-300
                                    focus:outline-none focus:border-indigo-500
                                "
                                    type=""
                                    placeholder="请输入密码"
                                    onChange={(e) => { userLoginpwd(e) }}
                                    onBlur={uservrefpwd}
                                />
                            </div>
                            <p ref={Loginpwdvref} style={{ color: 'red', display: 'none' }}>长度应在1到3之间</p>
                            <div className="flex items-center justify-between">
                                <div className="flex items-center">
                                    <input
                                        id="remember_me"
                                        name="remember_me"
                                        type="checkbox"
                                        className="
                                        h-4
                                        w-4
                                        bg-blue-500
                                        focus:ring-blue-400
                                        border-gray-300
                                        rounded
                                    "

                                    />
                                    <label
                                        // for="remember_me"
                                        className="ml-2 block text-sm text-gray-900"
                                    >记住我</label>
                                </div>
                                <div className="text-sm">
                                    <a href="#" className="text-indigo-400 hover:text-blue-500"
                                    >忘记密码？</a>
                                </div>
                            </div>
                            <div>
                                <button
                                    type='button'
                                    className="
                                    w-full
                                    flex
                                    justify-center
                                    bg-gradient-to-r
                                    from-indigo-500
                                    to-blue-600
                                    hover:bg-gradient-to-l
                                    hover:from-blue-500
                                    hover:to-indigo-600
                                    text-gray-100
                                    p-4
                                    rounded-full
                                    tracking-wide
                                    font-semibold
                                    shadow-lg
                                    cursor-pointer
                                    transition
                                    ease-in
                                    duration-500
                                "
                                    onClick={login}
                                >登 录</button>
                            </div>
                            <p
                                className="
                                items-center
                                justify-center
                                mt-10
                                text-center text-md text-gray-500
                            "
                            >
                                <span>还没有账号？</span>
                                <a
                                    href="http://www.bootstrapMB.com/"
                                    target="_blank"
                                    className="
                                    text-indigo-400
                                    hover:text-blue-500
                                    no-underline
                                    hover:underline
                                    cursor-pointer
                                    transition
                                    ease-in
                                    duration-300
                                "
                                >立即注册</a>
                            </p>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    )
}
